<template>
	<div class="app-container">
		<div>
      <p class="dialogTitle title">当前地震事件:
        <span v-if="currentEvent">{{ currentEvent.eventName }}</span>
        <span v-else>请在地震事件管理中设置当前地震事件</span>
      </p>
    </div>
		<el-row>
			<el-col :span="8">
				1、通过调查数据房屋计算破坏比
			</el-col>
			<el-col :span="6">
				<el-link type="primary" :underline="false" @click="viewFormula">查看计算公式</el-link>
			</el-col>
		</el-row>
		<el-row style="margin-top: 20px;">
			<el-col :span="10">
				<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
					<el-form-item label="评估子区" prop="xstmId">
						<el-select v-model="queryParams.xstmId" placeholder="请选择评估子区" @change="changeXstmId" clearable>
              <el-option v-for="item in option" :key="item.xstmId" :label="item.evaluationSubareaName" :value="item.xstmId">
              </el-option>
            </el-select>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="handleQuery">计算</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<!-- <el-col :span="16" style="color: red;font-size: 14px;">
				{{form.message}}
			</el-col> -->
		</el-row>
		<el-row>
			<el-col :span="18">
				<el-table v-loading="loading" :data="dataList" stripe :span-method="objectSpanMethod">
					<el-table-column label="评估子区名称" align="center" prop="evaluationSubareaName" />
					<el-table-column label="结构类型" align="center" prop="structureType" >
						<template #default="scope">					
		          {{getStructureType(scope.row.structureType)}}
		        </template>
		      </el-table-column>
					<el-table-column label="破坏状态%" align="center" prop="">
						<el-table-column label="基本完好" align="center" prop="intactRatio">
							<template #default="scope">					
								<span v-if="parseInt(scope.row.intactRatio) > 100" style="color:red">{{scope.row.intactRatio}}</span>
								<span v-else>{{scope.row.intactRatio}}</span>
							</template>
						</el-table-column>
						<el-table-column label="轻微破坏" align="center" prop="minorRatio">
							<template #default="scope">					
								<span v-if="parseInt(scope.row.minorRatio) > 100" style="color:red">{{scope.row.minorRatio}}</span>
								<span v-else>{{scope.row.minorRatio}}</span>
							</template>
						</el-table-column>
						<el-table-column label="中等破坏" align="center" prop="moderateRatio">
							<template #default="scope">					
								<span v-if="parseInt(scope.row.moderateRatio) > 100" style="color:red">{{scope.row.moderateRatio}}</span>
								<span v-else>{{scope.row.moderateRatio}}</span>
							</template>
						</el-table-column>
						<el-table-column label="严重破坏" align="center" prop="seriousRatio">
							<template #default="scope">					
								<span v-if="parseInt(scope.row.seriousRatio) > 100" style="color:red">{{scope.row.seriousRatio}}</span>
								<span v-else>{{scope.row.seriousRatio}}</span>
							</template>
						</el-table-column>
						<el-table-column label="毁坏" align="center" prop="destroyRatio">
							<template #default="scope">					
								<span v-if="parseInt(scope.row.destroyRatio) > 100" style="color:red">{{scope.row.destroyRatio}}</span>
								<span v-else>{{scope.row.destroyRatio}}</span>
							</template>
						</el-table-column>
					</el-table-column>
				</el-table>
				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
            @pagination="getListA" />
			</el-col>
		</el-row>

		<el-dialog title="计算公式" v-model="open" width="700px" append-to-body>
			<div style="font-size: 16px;">
				<p>每个评估子区应分别计算不同类别房屋在各破坏等级下的破坏比，计算方法应按下列步骤：</p>
					<p>a)分别统计一个评估子区内所有抽样点某类房屋遭受某种破坏等级的破坏面积之和A；</p>
					<p>b)分别统计该评估子区内某类房屋总建筑面积S；</p>
					<p>c)评估子区内某类房屋遭受某种破坏等级的破坏比为A/S。</p>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="open = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="FailureRatio">
	import useEventStore from "@/store/modules/event";
	import { getAllList, getEvaluationSubArea, getMessage, getListAll, getFailureRatioByXsemId } from "@/api/directLossAssess/failureRatio.js"
	import { getDict } from "@/api/system/dict";
	import { ElMessageBox, ElMessage } from 'element-plus'
	const { proxy } = getCurrentInstance();
	const dataList = ref([]);
	const loading = ref(false);
	const open = ref(false);
	const total = ref(0);
	const currentEvent = computed(() => useEventStore().currentEvent);
	const option = ref([])
	const option1 = ref([])
	const data = reactive({
		queryParams: {
			page: 1,
			rows: 20,
			xstmId: undefined,
			evaluationSubareaName:""
		},
		form: {}
	})
	const {
		queryParams,
		form
	} = toRefs(data)

	// 计算
	function handleQuery() {
		queryParams.value.page = 1;
		if(evaluationMessage.value){
			ElMessage({
				message: evaluationMessage.value,
				type: 'warning',
				dangerouslyUseHTMLString: true
			})
			return
		}
		option.value.forEach(item => {
      if (item.xstmId == queryParams.value.xstmId) {
        queryParams.value.evaluationSubareaName = item.evaluationSubareaName;
      }
  	})
		getFailureRatioByXsemId({xsemId:currentEvent.value.id}).then(res=>{
			if(res.data.length!=0){
				ElMessageBox.confirm("重复计算提示“已经有计算结果，重新计算会覆盖上次的计算结果，是否继续计算?", "系统提示", 
					{
						cancelButtonText: '取消',
						confirmButtonText: '确定',
						dangerouslyUseHTMLString: true,
						type: "warning",
				}).then(() => {
					getList();
				}).catch(() => {});
			}else{
				getList();
			}
		})
	}

	/** 重置按钮操作 */
	function resetQuery() {
		dataList.value = [];
		proxy.resetForm("queryRef");
		handleQuery();
	}

	/** 导出按钮操作 */
	function handleExport() {
		proxy.downloadTemplate('/samPoiData/exportExcel', {
			xsemId: currentEvent.value.id
		}, `抽样点数据.xls`)
	}

	// 编辑
	function handleEdit(row) {
		detail(row.id);
	}

	// 查看计算公式
	function viewFormula(id) {		
		open.value = true;		
	}
	
	let evaluationMessage = ref('')
	function getEvaluationSubAreaList() {
		getEvaluationSubArea(currentEvent.value?.id).then(response => {
			if(response.data.list.length>0){
				option.value = response.data.list
				evaluationMessage.value = ''
				if(response.data.message){
					proxy.$modal.msgWarning(response.data.message)
				}
			}else{
				ElMessage({
					message: response.data.message,
					type: 'warning',
					dangerouslyUseHTMLString: true
				})
				evaluationMessage.value = response.data.message
			}
		});		
	}
	function getMessageInfo() {
		getMessage(currentEvent.value.id).then(response => {
			form.value.message = response.data
		});		
	}

	function getList() {
		loading.value = true;
		getAllList({xsemId:currentEvent.value.id}).then(response => {
			// proxy.$modal.msgSuccess(response.message);
			getListA();			
			loading.value = false;
		}).catch(() => loading.value = false);
	}
	function changeXstmId(){
		getListA();
	}
	/** 查询数据列表 */
	function getListA() {
			loading.value = true;
			getListAll({...queryParams.value,xsemId:currentEvent.value.id}).then(response => {
				dataList.value = response.data.rows ? response.data.rows : [];
				total.value = response.data.total;
				loading.value = false;
			}).catch(() => loading.value = false);
	}
	function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	 if (columnIndex === 0) {
		 const _row = setTable(dataList.value).one[rowIndex];
		 const _col = _row > 0 ? 1 : 0;
		 return {
			 rowspan: _row,
			 colspan: _col
		 };
	 }
//	 if (columnIndex === 1 ) {
//		 const _row = setTable(getData.value).two[rowIndex];
//		 const _col = _row > 0 ? 1 : 0;
//		 return {
//		 rowspan: _row,
//			 colspan: _col
//			};
//		}
//	 if (columnIndex === 3 ) {
//		 const _row = setTable(getData.value).three[rowIndex];
//		 const _col = _row > 0 ? 1 : 0;
//		 return {
//		 rowspan: _row,
//			 colspan: _col
//			};
//		}
//	 if (columnIndex === 4 ) {
//		 const _row = setTable(getData.value).four[rowIndex];
//		 const _col = _row > 0 ? 1 : 0;
//		 return {
//		 rowspan: _row,
//			 colspan: _col
//			};
//		}
}
	function setTable(tableData) {
		 let spanOneArr = [],
		 spanTwoArr = [],
		 spanThreeArr = [],
		 spanFourArr = [],
		 concatOne = 0,
		 concatTwo = 0,
		 concatThree = 0,
		 concatFour = 0;
		 tableData.forEach((item, index) => {
			 if (index === 0) {
				 spanOneArr.push(1);
				 spanTwoArr.push(1);
				 spanThreeArr.push(1);
				 spanFourArr.push(1);
			 } else {
				 if (item.evaluationSubareaName === tableData[index - 1].evaluationSubareaName && index%10!=0) {
				 //第一列需合并相同内容的判断条件
					 spanOneArr[concatOne] += 1;
					 spanOneArr.push(0);
				 } else {
					 spanOneArr.push(1);
					 concatOne = index;
				 }
				 
	//			 if (item.longitude === tableData[index - 1].longitude) {
	//			 //第二列和需合并相同内容的判断条件
	//				 spanTwoArr[concatTwo] += 1;
	//				 spanTwoArr.push(0);
	//			 } else {
	//				 spanTwoArr.push(1);
	//				 concatTwo = index;
	//			 }
	//			 
	//			 if (item.latitude === tableData[index - 1].latitude) {
	//			 //第三列和需合并相同内容的判断条件
	//				 spanThreeArr[concatThree] += 1;
	//				 spanThreeArr.push(0);
	//			 } else {
	//				 spanThreeArr.push(1);
	//				 concatThree = index;
	//			 }
	//			 
	//			 if (item.macroPosition === tableData[index - 1].macroPosition) {
	//			 //第三列和需合并相同内容的判断条件
	//				 spanFourArr[concatFour] += 1;
	//				 spanFourArr.push(0);
	//			 } else {
	//				 spanFourArr.push(1);
	//				 concatFour = index;
	//			 }
			 }
		 });
	 	return {
			 one: spanOneArr,
			 two: spanTwoArr,
			 three: spanThreeArr,
			 four: spanFourArr,
	 	};
	}
	/** 获取字典值 */
	async function getDictData() {
		await getDict("jglx").then(response => {
		    option1.value = response.data;
		});
	}
	function getStructureType(val){
	  var name = ''
	  option1.value.forEach(item => {
			if(item.dictItemCode == val) {
				name = item.dictItemName
				return
			}
		})
		return name
	}
	onMounted(() => {
		setTimeout(() => {
			getEvaluationSubAreaList();
			getListA();
		}, 200)
	})
	getDictData();
</script>

<style scoped lang="scss">
	.title {
		margin: 0 0 20px !important;
	}
	:deep(.el-table) th.el-table__cell {
    border-bottom: 1px solid #ffffff !important;
    border-right: 1px solid #ffffff !important;
	}
	:deep(.el-table) td.el-table__cell {
    border-bottom: 1px solid #ebeef5 !important;
    border-right: 1px solid #ebeef5 !important;
	}
</style>